<%--
  Created by IntelliJ IDEA.
  User: 13083
  Date: 2019/6/29
  Time: 10:59
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<html>
<head>
    <title>Title</title>
    <title>个人</title>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

    <!-- Mobile Web-app fullscreen -->
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="mobile-web-app-capable" content="yes">

    <!-- Meta tags -->
    <meta name="description" content="">
    <meta name="author" content="">
    <link rel="icon" href="favicon.ico">

    <!--Title-->
    <title>个人中心</title>

    <!--CSS styles-->
    <link rel="stylesheet" media="all" href="${pageContext.request.contextPath }/css/bootstrap.css" />
    <link rel="stylesheet" media="all" href="${pageContext.request.contextPath }/css/animate.css" />
    <link rel="stylesheet" media="all" href="${pageContext.request.contextPath }/css/font-awesome.css" />
    <link rel="stylesheet" media="all" href="${pageContext.request.contextPath }/css/furniture-icons.css" />
    <link rel="stylesheet" media="all" href="${pageContext.request.contextPath }/css/linear-icons.css" />
    <link rel="stylesheet" media="all" href="${pageContext.request.contextPath }/css/magnific-popup.css" />
    <link rel="stylesheet" media="all" href="${pageContext.request.contextPath }/css/owl.carousel.css" />
    <link rel="stylesheet" media="all" href="${pageContext.request.contextPath }/css/ion-range-slider.css" />
    <link rel="stylesheet" media="all" href="${pageContext.request.contextPath }/css/theme.css" />


    <link rel="stylesheet" media="all" href="${pageContext.request.contextPath }/css/gerenzhongxin.css" />
    <!--Google fonts-->
    <link href="https://fonts.googleapis.com/css?family=Montserrat:400,500,600&amp;subset=latin-ext" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500" rel="stylesheet">

    <!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!--[if lt IE 9]>
    <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
    <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
    <script src="http://code.jquery.com/jquery-1.8.0.min.js"></script>
    <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>

    <%--<script src="js/test.js"></script>--%>
</head>
<body>
<form action="${pageContext.request.contextPath }/AddressServlet?ID=${ID}" method="post" id="form_xiugai">
    <input type="hidden" name="method"  value="modify">
    <ul style="margin-left: 250px;margin-top: 50px">
        <li style="display:inline-block;width:200px;text-align:left;">
            <div class="row form-group" style="width: 400px">
                <div class="col-md-12">
                    <label for="shouhr">收货人</label> <span class='red' id="shrspan"></span><br />
                    <input type="text" id="shouhr" class="form-control" name="addressee" value="${addressee}" placeholder="收货人" autocomplete="off">
                </div>
            </div>
        </li>
        <br>

        <li style="display:inline-block;width:200px;text-align:left;">
            <div class="row form-group" style="width: 400px">
                <div class="col-md-12">
                    <label for="shoujhm">手机号码</label><span class='red' id="sjspan"></span><br />
                    <input type="phone" id="shoujhm" class="form-control" name="phone" value="${phone}"  placeholder="手机号码" autocomplete="off" tabindex="1" maxlength="11">
                </div>
            </div>
        </li>
        <br>
        <li style="display:inline-block;width:200px;text-align:left;">
            <div class="row form-group" style="width: 400px">
                <div class="col-md-12">
                    <label for="diz">地址</label><span class='red' id="dzspan"></span><br />
                    <input type="text" id="diz" class="form-control" name="address" value="${address}"  placeholder="地址" autocomplete="off">
                </div>
            </div>
        </li>
        <br>
        <li style="display: inline-block;width:200px">
            <div class="row form-group" id="xgdizhi" >
                <div class="col-md-12"  id="xgdizhi-1">
                        <input id="xiugaidizhi" type="button" class="btn btn-primary" value="修改" style="margin-left: 0;width: 100px">
                </div>
                <div class="col-md-12"  id="xgdizhi-2">
                    <input type="button" id="quxiao" class="btn btn-primary" value="取消" style="margin-left: 140px;width: 100px">
                </div>
            </div>
        </li>
    </ul>
</form>

<script type="text/javascript">
    /*获得当前路径*/
    //声明三个变量
    var validate={

        dh_form:false,
        dz_form:false,
        shr_form:false


    };

    /*校验字符串长度*/
    function checkLength(str,min,max){
        if(str.length < min || str.length > max){
            return true;
        }else{
            return false;
            //$('#userspan').html('');
        }
    }


    //检测收货人是否为空
    function checkshr()
    {
        var  shr=$('#shouhr').val();
        if (shr=="")
        {
            $('#shrspan').html('收货人不能为空！');
            validate.shr_form=false;
            $('#shrspan').css('color','red');
            return false;
        }else{
            $('#shrspan').html(' √');
            validate.shr_form= true;
            $('#shrspan').css('color','green');
            return true;
        }
    }


    /*验证电话号码是否合法*/
    function checksjhm()
    {
        var dianhua = $('#shoujhm').val();
        if (checkLength(dianhua, 11, 11)) {
            $('#sjspan').html('该手机号码不合法');
            validate.dh_form = false;
            $('#sjspan').css('color','red');
            return false;
        } else {
            $('#sjspan').html(' √good');
            validate.dh_form = true;
            $('#sjspan').css('color', 'green');
            return true;
        }

        /*}*/
        /**/  /* })
        },"json")*/
    }
    //检测地址是否为空
    function checkdz()
    {
        var  dz=$('#diz').val();
        if (dz=="")
        {
            $('#dzspan').html('地址不能为空！');
            validate.dz_form=false;
            $('#dzspan').css('color','red');
            return false;
        }else{
            $('#dzspan').html(' √ good');
            validate.dz_form = true;
            $('#dzspan').css('color','green');
            return true;
        }
    }

    /**
     * 下面三 句为 当输入框发生变化时
     */
    $('#shouhr').change(checkshr);
    $('#shoujhm').change(checksjhm);
    $('#diz').change(checkdz);

    /*修改按钮点击*/
    $('#xiugaidizhi').click(function ()
        {
            $('#form_xiugai').submit();

        })
    $('#quxiao').click(function () {
        history.back();
    })
</script>
<script src="${pageContext.request.contextPath }/js/jquery.min.js"></script>
<script src="${pageContext.request.contextPath }/js/jquery.bootstrap.js"></script>
<script src="${pageContext.request.contextPath }/js/jquery.magnific-popup.js"></script>
<script src="${pageContext.request.contextPath }/js/jquery.owl.carousel.js"></script>
<script src="${pageContext.request.contextPath }/js/jquery.ion.rangeSlider.js"></script>
<script src="${pageContext.request.contextPath }/js/jquery.isotope.pkgd.js"></script>
<script src="${pageContext.request.contextPath }/js/main.js"></script>
</body>
</html>
